1、行级元素只有左右边距,没有上下外边距
2、p元素不是行级元素,span元素和b元素如果换行了,中是会有一条空白,如果没有换行紧挨着,则不会出现此情况。
3、块级和行内块级元素的外边距4个方向都有效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
.laoLiu{
width:150px;height:100px;background:#E1EFFF;
margin-bottom: 30px ;
margin-left: 30px ;
margin-right: 30px ;
margin-top: 30px ;
}
.laoQi{
width:150px;height:100px;background:green;
margin-left:30px;
}
</style>
</head>
<body>
<div style="background:gray;height:10px;"></div>
<span class="laoLiu">我要好好学习1</span><b class="laoQi">我要好好学习2</b>
<div style="background:purple;height:10px;"></div>
</body>
</html>
返回值:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
.laoLiu{
width:150px;height:100px;background:#E1EFFF;
margin: 50px ;
}
.laoQi{
width:150px;height:100px;background:green;
margin:30px;
}
</style>
</head>
<body>
<div style="background:gray;height:10px;"></div>
<img src="css7.03.01.png" alt="" class="laoLiu"> <img src="css7.03.01.png" alt="" class="laoQi">
<div style="background:purple;height:10px;"></div>
</body>
</html>
返回值: